{extend name="base"/}
{block name="resources"}
<style>
	.layui-colla-content li {
		line-height: 30px;
	}
	
	.upload-img-box {
		width: 256px;
		height: 82px;
	}
</style>
{/block}
{block name="main"}
<div class="layui-collapse ns-tips">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<div class="layui-colla-content layui-show">
			<ul>
				<li>可以上传三张图片，建议使用1920px*615px</li>
				<li>可上传.jpg、.png的图片</li>
				<li>"置空"会删除图片，提交保存后生效</li>
			</ul>
		</div>
	</div>
</div>

<div class="layui-form">
	<div class="layui-card ns-card-common ns-card-brief">
		<div class="layui-card-header">
			<span class="ns-card-title">图片上传</span>
		</div>
		<div class="layui-card-body">
			<div class="layui-form-item">
				<label class="layui-form-label img-upload-lable">首页banner1：</label>
				<div class="layui-input-block">
					<div class="upload-img-block img-upload">
						<div class="upload-img-box {if condition="$adv_config && $adv_config[0]['url']"}hover{/if}">
							<div class="ns-upload-default" id="shopImg1">
								{if condition="$adv_config && $adv_config.0.url"}
								<div id="preview_shopImg1" class="preview_img">
									<img layer-src src="{:img($adv_config.0.url)}" class="img_prev"/>
								</div>
								{else/}
								<div class="upload">
									<img src="ADMIN_IMG/upload_img.png"/>
									<p>点击上传</p>
								</div>
								{/if}
							</div>
							<div class="operation">
								<div>
									<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
									<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
								</div>
								<div class="replace_img js-replace">点击替换</div>
							</div>
							<input type="hidden" name="shopImg1" value="{$adv_config.0.url}">
						</div>
					</div>
				</div>
				<span class="ns-word-aux">图片展示在商家端前台首页广告位，建议上传图片尺寸为1920px * 615px</span>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label img-upload-lable">首页banner2：</label>
				<div class="layui-input-block">
					<div class="upload-img-block img-upload">
						<div class="upload-img-box {if condition="$adv_config && $adv_config[1]['url']"}hover{/if}">
							<div class="ns-upload-default" id="shopImg2">
								{if condition="$adv_config && $adv_config.1.url"}
								<div id="preview_shopImg2" class="preview_img">
									<img layer-src src="{:img($adv_config.1.url)}" class="img_prev"/>
								</div>
								{else/}
								<div class="upload">
									<img src="ADMIN_IMG/upload_img.png"/>
									<p>点击上传</p>
								</div>
								{/if}
							</div>
							<div class="operation">
								<div>
									<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
									<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
								</div>
								<div class="replace_img js-replace">点击替换</div>
							</div>
							<input type="hidden" name="shopImg2" value="{$adv_config.1.url}">
						</div>
					</div>
				</div>
				<span class="ns-word-aux">图片展示在商家端前台首页广告位，建议上传图片尺寸为1920px * 615px</span>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label img-upload-lable">首页banner3：</label>
				<div class="layui-input-block">
					<div class="upload-img-block img-upload">
						<div class="upload-img-box {if condition="$adv_config && $adv_config[2]['url']"}hover{/if}">
							<div class="ns-upload-default" id="shopImg3">
								{if condition="$adv_config && $adv_config.2.url"}
								<div id="preview_shopImg3" class="preview_img">
									<img layer-src src="{:img($adv_config.2.url)}" class="img_prev"/>
								</div>
								{else/}
								<div class="upload">
									<img src="ADMIN_IMG/upload_img.png"/>
									<p>点击上传</p>
								</div>
								{/if}
							</div>
							<div class="operation">
								<div>
									<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
									<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
								</div>
								<div class="replace_img js-replace">点击替换</div>
							</div>
							<input type="hidden" name="shopImg3" value="{$adv_config.2.url}">
						</div>
					</div>
				</div>
				<span class="ns-word-aux">图片展示在商家端前台首页广告位，建议上传图片尺寸为1920px * 615px</span>
			</div>
			
			<div class="ns-form-row">
				<button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
			</div>
		</div>
	</div>
</div>

{/block}
{block name="script"}
<script>
	// var adv_configStr = '{:json_encode($adv_config, JSON_UNESCAPED_SLASHES)}';
	// var adv_configJson = JSON.parse(adv_configStr);
	// if (!(adv_configJson[0] == null)) {
	// 	$("#shopImg1").html('<img src="' + ns.img(adv_configJson[0].url) + '" >');
	// }
	// if (!(adv_configJson[1] == null)) {
	// 	$("#shopImg2").html('<img src="' + ns.img(adv_configJson[1].url) + '" >');
	// }
	// if (!(adv_configJson[2] == null)) {
	// 	$("#shopImg3").html('<img src="' + ns.img(adv_configJson[2].url) + '" >');
	// }
	layui.use(['form'], function() {
		var form = layui.form,
			repeat_flag = false; //防重复标识
		form.render();

		// 搜索
		form.on('submit(save)', function(data) {

			var advArr = [];
			advArr.push({
				"url": $('input[name=shopImg1]').val()
			});
			advArr.push({
				"url": $('input[name=shopImg2]').val()
			});
			advArr.push({
				"url": $('input[name=shopImg3]').val()
			});
			data = data.field;

			if (advArr.length < 1) {
				layer.msg('至少上传一张图片');
				return;
			}
			data.config_json = JSON.stringify(advArr);

			if (repeat_flag) return;
			repeat_flag = true;
			//删除图片
			if(!data.shopImg1) shop_img1_upload.delete();
			if(!data.shopImg2) shop_img2_upload.delete();
			if(!data.shopImg3) shop_img3_upload.delete();
			
			$.ajax({
				url: ns.url("admin/shopjoin/adv"),
				data: data,
				dataType: 'JSON',
				type: 'POST',
				success: function(res) {
					layer.msg(res.message);
					repeat_flag = false;
					if (res.code == 0) {
						location.reload();
					}
				}
			});
		});

		// 普通图片上传
		var shop_img1_upload = new Upload({
			elem: '#shopImg1'
		});

		// 普通图片上传
		var shop_img2_upload = new Upload({
			elem: '#shopImg2'
		});

		// 普通图片上传
		var shop_img3_upload = new Upload({
			elem: '#shopImg3'
		});
	});
</script>
{/block}